﻿@{
    Layout = null;
}

<div class="row col-md-12 font-rfs" style="min-height:5vh;border-bottom:1px solid #dee2e6;margin-left:15px;margin-left:0px;padding-left: 0px;padding-right: 0px;margin-right: 0px;">
    <div class="input-group row col-md-12 font-rfs" style="padding-left: 0px;padding-right: 0px;margin-left: 0px;">
        <div class="col-1 pr-0" style="padding-left: 0px;">
            <span class="input-group-text font-rfs border-radius-noradius noRightBorder" style="display: block;">开始时间</span>
        </div>
        <div class="col-2 pl-0 pr-0" style="padding-left: 0px;">
            <input id="wl-StarTime" class="TimePicker form-control font-rfs border-radius-noradius" value="2024/07/01" />
        </div>
        <div class="col-1 pr-0" style="padding-left: 0px;">
            <span class="input-group-text font-rfs border-radius-noradius noRightBorder" style="display: block;">结束时间</span>
        </div>
        <div class="col-2 pl-0 pr-0" style="padding-left: 0px;">
            <input id="wl-EndTime" class="TimePicker form-control font-rfs border-radius-noradius" value="2024/07/17" />
        </div>
        <div class="col-1 pr-0" style="padding-left: 0px;">
            <button id="wl-StatisticalQuery" class="btn btn-outline-primary font-rfs" style="width:100%; height:fit-content;margin-top: 0px;">查 询</button>
        </div>
    </div>
</div>
<div class="row col-md-12 font-rfs" style="width:100%;height:84vh;margin-left:15px;margin-left:0px;padding-left: 0px;padding-right: 0px;margin-right: 0px;">
    <div class="font-rfs" style="width:100%;height:100%;">

        <div id="svgDiv" class="row col-md-12 font-rfs ml-0 pr-0 pl-0" style="border:solid 1px;height:83vh;">
            <svg id="svg" class="row col-md-11 font-rfs ml-0 pl-0 mr-0" style="height:82vh;"></svg>
            <div id="tools" class="row col-md-1 font-rfs ml-0" style="height:82vh;display:table-cell;text-align: center;box-shadow: 0.2rem 0.2rem 0.4rem 0.2rem rgba(0,0,0,.15);">
                <button id="SQ-WorkLoad" class="btn" style="padding-top: 0px;font-size: calc(1.2em + 1.2vw);" title="导出EXCEL">
                    <i class="bi-filetype-xlsx" style="color:forestgreen;"></i>
                </button>

            </div>
        </div>

    </div>
</div>
<script src="~/lib/d3.js"></script>
<script>

    $(document).ready(function () {
        $('.TimePicker').datetimepicker({
            timepicker: false,
            format: "Y/m/d",
        });
        $.datetimepicker.setLocale('zh');
    });

    $("#wl-StatisticalQuery").click(function () {
        if ($("#wl-StarTime").val().length == 0) {
            alert("开始时间不能为空！");
            return false;
        }
        if ($("#wl-EndTime").val().length == 0) {
            alert("结束时间不能为空！");
            return false;
        }

        $.post("CreateStatisticalQuery", {
            QueryName: "WorkLoad",
            parameters: $('#wl-StarTime').val() + ',' + $('#wl-EndTime').val()
        }, function (data) {
            DrawChart(data)
        });
    });

    function DrawChart(datas) {

        var entryPersonName = []; // 这段代码是把人名取出，放到x轴上
        $.each(datas, function (index, obj) {
            entryPersonName.push(obj.entryPersonName);
        });
        var pcount = [];  // 这段代码是把人名对应的工作量取出来
        $.each(datas, function (index, obj) {
            pcount.push(obj.pCount);
        });

        var svg = d3.select("#svg")  // 定义整个画布的属性，高度、宽度、背景颜色等等
            .style("background-color", "antiquewhite");

/* 这一段是定义Y轴，并绘制 */
        var linear = d3.scaleLinear()  // 定义比例尺
            .domain([d3.max(pcount), 0])  // 定义域，输入范围
            .range([0, 400])  // 值域，跟定义域反着来，这样Y轴的方向才正确。250代表Y轴250px
            .nice();  // d3.nice() 提供一个刻度函数，它将域四舍五入到一个不错的值。

        var Yayis = d3.axisLeft() // 没有比例尺会报错，坐标轴的大小跟比例尺关系密切 Y轴
            .scale(linear)
            .ticks(5);  //指定刻度的数量

        svg.append("g")
            .attr("transform", "translate(50,60)")  // Y轴，坐标原点
            .call(Yayis);
/* 这一段是定义Y轴，并绘制 */

        var xlinear = d3.scaleBand()  // 定义非连续性X坐标轴
            .domain(entryPersonName)  // 定义域，表示输入范围
            .range([0, 350]);  // 值域，这个值控制着x轴线段的实际长度
        var marginLeft = (350 / (entryPersonName.length + 2)); // 这个值控制每一个柱状图的左对齐位置

        var Xaxis = d3.axisBottom() // X轴
            .scale(xlinear)
            .tickArguments([5]);

        svg.append("g")
            .attr("transform", "translate(50,460)")  // X轴，坐标原点
            .call(Xaxis)
            .call(g => g.selectAll("rect")
                .data(datas)
                .join("rect")
                .attr("fill", "steelblue")
                .attr("transform", `translate(${marginLeft - 7.5},0)`)
                .attr("x", (d) => xlinear(d.entryPersonName))
                .attr("y", (d) => 0 - (linear(0) - linear(d.pCount)))
                .attr("height", (d) => linear(0) - linear(d.pCount))
                .attr("width", 15))
            .call(g => g.selectAll("mytext")
                .data(datas)
                .enter()
                .append("text")
                .attr("fill", "currentColor") // 这个属性没有，文本就会看不见
                .attr("x", (d) => xlinear(d.entryPersonName))
                .attr("y", function (d, i) { return i + 10;})
                .attr("dx", function () { return marginLeft; })
                .attr("dy", function (d) { return 0 - (linear(0) - linear(d.pCount)) -15; })
                .text(function (d) { return d.pCount; })
                );

    }

</script>
